import React, {useEffect} from "react";
import {Button, Col, DatePicker, Form, Input, Modal, Row, Select} from "antd";
import {Salary} from "@/types/resp/salary";

interface SalaryViewProps {
  visible: boolean;
  viewRow: object;
  onCloseSalaryView: () => void;
}

const SalaryView: React.FC<SalaryViewProps> = ({visible, viewRow, onCloseSalaryView}) => {

  const [form] = Form.useForm<Salary>();

  const onBack = () => {
    onCloseSalaryView()
  };

  useEffect(() => {
    if (!visible) {
      return
    }
    if (viewRow) {
      form.setFieldsValue(viewRow);
    }
  }, [viewRow]);

  const addFooter = (
    <div className='custom-footer'>
      <Button type="primary" onClick={onBack}>关闭</Button>
    </div>
  );

  return (
    <Modal title={"员工薪资详情"} open={visible} onCancel={onCloseSalaryView}
        width={'var(--modal-width)'} footer={addFooter} style={{marginTop: 'var(--modal-margin-top)'}}>
      <Form form={form} labelCol={{span: 6}} disabled={true}>
        <Row gutter={10}>
          <Col span={11}>
            <Form.Item name="employeeName" label="员工姓名">
              <Input/>
            </Form.Item>
          </Col>
          <Col span={11}>
            <Form.Item name="basicSalary" label="基本工资">
              <Input/>
            </Form.Item>
          </Col>
        </Row>
        <Row gutter={10}>
          <Col span={11}>
            <Form.Item name="performanceSalary" label="绩效工资">
              <Input/>
            </Form.Item>
          </Col>
          <Col span={11}>
            <Form.Item name="bonus" label="奖金">
              <Input/>
            </Form.Item>
          </Col>
        </Row>
        <Row gutter={10}>
          <Col span={11}>
            <Form.Item name="allowance" label="津贴">
              <Input/>
            </Form.Item>
          </Col>
          <Col span={11}>
            <Form.Item name="overtimePay" label="加班费">
              <Input/>
            </Form.Item>
          </Col>
        </Row>
        <Row gutter={10}>
          <Col span={11}>
            <Form.Item name="socialSecurityDeduction" label="社保扣除">
              <Input/>
            </Form.Item>
          </Col>
          <Col span={11}>
            <Form.Item name="housingFundDeduction" label="公积金扣除">
              <Input/>
            </Form.Item>
          </Col>
        </Row>
        <Row gutter={10}>
          <Col span={11}>
            <Form.Item name="personalIncomeTaxDeduction" label="个人所得税扣除">
              <Input/>
            </Form.Item>
          </Col>
          <Col span={11}>
            <Form.Item name="otherDeductions" label="其他扣除">
              <Input/>
            </Form.Item>
          </Col>
        </Row>
        <Row gutter={10}>
          <Col span={11}>
            <Form.Item name="grossSalary" label="应发工资">
              <Input/>
            </Form.Item>
          </Col>
          <Col span={11}>
            <Form.Item name="netSalary" label="实发工资">
              <Input/>
            </Form.Item>
          </Col>
        </Row>
        <Row gutter={10}>
          <Col span={11}>
            <Form.Item name="payDate" label="发放日期">
              <DatePicker/>
            </Form.Item>
          </Col>
          <Col span={11}>
            <Form.Item name="paymentMethod" label="支付方式">
              <Select placeholder="请选择支付方式" options={[
                { value: 10, label: <span>银行转账</span> },
                { value: 20, label: <span>现金</span> },
                { value: 30, label: <span>支票</span> }
              ]} />
            </Form.Item>
          </Col>
        </Row>
        <Row gutter={10}>
          <Col span={11}>
            <Form.Item name="bankAccountNumber" label="银行账号">
              <Input/>
            </Form.Item>
          </Col>
        </Row>
        <Row gutter={10}>
          <Col span={11}>
            <Form.Item name="createTime" label="创建时间">
              <Input/>
            </Form.Item>
          </Col>
          <Col span={11}>
            <Form.Item name="modifyTime" label="最后修改时间">
              <Input/>
            </Form.Item>
          </Col>
        </Row>
      </Form>
    </Modal>
  )
}

export default SalaryView;
